<template>
  <div class="monitor-container">
    <!--行内表单-->
    <div class="form-inline-container">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-input
            v-model="formInline.search"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addClick" icon="el-icon-plus"
            >添加</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="你确定要批量开启吗？"
          >
            <template #reference>
              <el-button type="primary" icon="el-icon-sunny"
                >批量开启</el-button
              >
            </template>
          </el-popconfirm>
        </el-form-item>
        <el-form-item>
          <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="你确定要批量关闭吗？"
          >
            <template #reference>
              <el-button type="info" icon="el-icon-switch-button"
                >批量关闭</el-button
              >
            </template>
          </el-popconfirm>
        </el-form-item>
        <el-form-item>
          <el-popover
            placement="bottom-end"
            :width="200"
            :visible="formInline.visible"
          >
            <div class="p10">
              <el-slider v-model="formInline.value2"></el-slider>
            </div>
            <div class="d-e-c">
              <el-button
                size="mini"
                type="text"
                @click="formInline.visible = false"
                >取消</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="formInline.visible = false"
                >确定</el-button
              >
            </div>
            <template #reference>
              <el-button type="success" icon="el-icon-thumb"
                >批量调光</el-button
              >
            </template>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <div v-loading="loading">
      <el-row>
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <el-card :body-style="{ padding: '10px' }" shadow="hover">
            <div class="img-box">
              <el-image
                style="width: 100%; height: 100%"
                :src="item.img_id"
                :fit="'cover'"
              ></el-image>
            </div>
            <div class="p10">
              <div>{{ item.lamppost_name }}</div>
              <div>类型：路灯网关(智慧路灯)</div>
              <div class="bottom pt10">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="previewClick(item)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="editClick(item)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  @click="delClick(item)"
                  >删除</el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          :current-page="currentPage"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
        >
        </el-pagination>
      </div>
    </div>

    <!--添加-->
    <Add :visible="addVisible" @close="closeAdd"></Add>

    <!--预览-->
    <Preview :visible="previewVisible" @close="closePreview"></Preview>
  </div>
</template>

<script>
import Add from "./part/Add.vue";
import Preview from "./part/Preview.vue";
export default {
  components: {
    //添加
    Add,
    //预览
    Preview,
  },
  data() {
    return {
      //是否正在加载
      loading: false,
      //表单数据
      formInline: {
        //搜索关键字
        search: "",
      },
      //总条数
      total: 500,
      //每页显示条数
      pageSize: 10,
      //当前页数
      currentPage: 1,
      //表格数据
      tableData: [],
      //是否打开添加
      addVisible: false,
      //是否打开预览
      previewVisible: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /**
     * 获取列表
     */
    getData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      this.tableData = [];
      for (
        let i = this.pageSize * (this.currentPage - 1) + 1;
        i < this.pageSize * this.currentPage + 1;
        i++
      ) {
        let d = new Date();
        let item = {
          id: i,
          created_date:
            d.getFullYear() +
            "-" +
            d.getMonth() +
            "-" +
            d.getDate() +
            " " +
            d.getHours() +
            ":" +
            d.getMinutes() +
            ":" +
            d.getSeconds(),
          update_date: "2021-02-24T06:13:41.308Z",
          telphone:
            "138" + Math.floor(Math.random() * (100000000 - 9999999) + 9999999),
          business_id: 0,
          //名称
          lamppost_name: "超级灯杆",
          //图片
          img_id:
            "https://staticqn.qizuang.com/ask/20161223/Fv5mnp_37KKcGAwOaErew63zjY-h.jpg",
          //类型
          type_id: 1,
          //材质
          lamppost_material: "",
          //高度
          lamppost_height: "",
          //壁厚
          lamppost_thickness: "",
          //底座尺寸
          lamppost_base_size: "",
          //描述
          lamppost_describe: "",
        };
        this.tableData.push(item);
      }
    },

    /**
     * 搜索
     */
    onSubmit() {
      console.log("submit!");
    },

    /**
     * 分页切换
     */
    currentChange(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 上一页
     */
    prevClick(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 下一页
     */
    nextClick(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 多选
     */
    handleSelectionChange(e) {
      console.log(e);
    },

    /**
     * 预览
     */
    previewClick() {
      this.previewVisible = true;
    },

    /**
     * 关闭预览
     */
    closePreview() {
      this.previewVisible = false;
    },

    /**
     * 添加
     */
    addClick() {
      this.addVisible = true;
    },

    /**
     * 修改
     */
    editClick(e) {
      this.addVisible = true;
    },

    /**
     * 关闭
     */
    closeAdd(e) {
      this.addVisible = false;
    },

    /**
     * 删除
     */
    delClick(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.monitor-container {
  .img-box {
    position: relative;
    width: 100%;
    padding-top: 60%;
    .el-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>